<template>
  <div id="center">
    <div style="fontSize:30px;">当前天气</div>
    <!--    温度option3-->
    <div style="width:50%;height:30%;display:flex;justify-content: center;flex-direction: column;align-items: center;">
      <div style="width:100%;text-align:center;fontSize:20px;fontWeight:550;padding-bottom: 2%">空气温度</div>
      <!--      <dv-water-level-pond :config="option3" style="width:150px;height:200px" />-->
      <dv-border-box-10 style="width:180px;height:120px;fontSize:30px;text-align:center;line-height: 115px">
        {{ this.msg.data1.Air_temperature }}
      </dv-border-box-10>
    </div>
    <!--    湿度humi-->
    <div
        style="width:50%;height:30%;display:flex;justify-content: center;flex-direction: column;align-items: center;padding-top: 2%">
      <div style="width:100%;text-align:center;fontSize:20px;fontWeight:550;padding-bottom: 2%">空气湿度</div>
      <dv-decoration-9 style="width:80%;height:83%;fontSize: 23px">{{ this.msg.data1.Air_humidity }}</dv-decoration-9>
    </div>
    <!--    照度-->
    <div style="width:50%;height:30%;display:flex;justify-content: center;flex-direction: column;align-items: center;">
      <div style="width:100%;text-align:center;fontSize:20px;fontWeight:550;padding-bottom: 2%">光照</div>
      <dv-decoration-1 style="width:200px;height:20px;"/>
      <div style="fontSize:26px;padding-bottom: 2%">{{ this.msg.data1.Air_illuminance }}</div>
      <dv-decoration-1 style="width:200px;height:20px;"/>
    </div>
    <!--    风速风向option2-->
    <div style="width:50%;height:30%;display:flex;justify-content: center;flex-direction: column;align-items: center;">
      <dv-decoration-7 style="width:100%;text-align:center;fontSize:20px;fontWeight:550;padding-bottom: 2%">
        风向：{{ this.msg.data2.Wind_direction }}
      </dv-decoration-7>
      <div style="width:90%;text-align:center;fontSize:20px;fontWeight:550;">风速</div>
      <dv-border-box-3
          style="width:90%;height:90%;text-align:center;line-height:85px;display:flex;justify-content: center;flex-direction: column;align-items: center;fontSize:30px;fontWeight:550;padding-bottom: 2%">
        {{ this.msg.data2.Wind_speed }}
      </dv-border-box-3>
    </div>
    <!--    二氧化碳-->
    <div
        style="width:50%;height:30%;display:flex;justify-content: center;flex-direction: column;align-items: center;padding-top: 2%;">
      <div style="width:100%;text-align:center;fontSize:28px;fontWeight:550;padding-bottom: 12%">CO₂</div>
      <div style="fontSize:26px;padding-bottom: 2%">{{ this.msg.data1.Air_carbon_dioxide }}</div>
      <dv-decoration-5 style="width:250px;height:40px;"/>
      "
    </div>
    <!--    气压option1-->
    <div style="width:50%;height:30%;display:flex;justify-content: center;flex-direction: column;align-items: center;">
      <div style="width:100%;text-align:center;fontSize:20px;fontWeight:550;padding-bottom: 2%">气压</div>
      <dv-decoration-1 style="width:200px;height:20px;"/>
      <div style="fontSize:26px;padding-bottom: 2%">{{ this.msg.data1.Air_pressure }}</div>
      <dv-decoration-1 style="width:200px;height:20px;"/>
    </div>
  </div>
</template>

<script>
import mqtt from 'mqtt'
import data_parse from "../plugins/mqtt.js"

export default {
  data() {
    return {
      option1: {
        title: {
          text: '气压',
          style: {
            fill: '#fff'
          }
        },
        series: [
          {
            type: 'gauge',
            data: [{name: 'itemA', value: 100}],
            center: ['50%', '55%'],
            axisLabel: {
              formatter: '{value}%',
              style: {
                fill: '#fff'
              }
            },
            axisTick: {
              style: {
                stroke: '#fff'
              }
            },
            animationCurve: 'easeInOutBack'
          }
        ]
      },
      option2: {
        title: {
          text: '当前气压',
        },
        value: this.windSpeed,
        lineDash: [10, 2],
        formatter: '{value}m/s',
      },
      option3: {
        title: {
          text: '当前气温',
        },
        data: ["100"],
        formatter: '{value}℃',
        shape: 'round',
        colors: ["orange"],

      },
      connection: {
        host: "1.15.50.60",//链接地址
        port: "8083",//端口
        endpoint: "/mqtt",
        clean: true, // 保留会话
        connectTimeout: 4000, // 超时时间
        reconnectPeriod: 4000, // 重连时间间隔
        // 认证信息
        clientId: "mqttjs_3be2c321" + new Date().getTime(),
        username: "",//用户名 不用的话什么也不用填
        password: "",//密码 不用的话什么也不用填
      },
      subscription: {
        topic: "iot-hist-test-data",
        qos: 0,
      },
      receiveNews: "",
      client: {
        connected: false,
      },
      subscribeSuccess: false,
      msg: {},
    }
  },

  methods: {
    createConnection() {
      const {host, port, endpoint, ...options} = this.connection;
      const connectUrl = `ws://${host}:${port}${endpoint}`;
      const {topic, qos} = this.subscription;
      try {
        this.client = mqtt.connect(connectUrl, options);
      } catch (error) {
        console.log("mqtt.connect error", error);
      }
      //连接mqtt
      this.client.on("connect", () => {
        console.log("Connection succeeded!");
        //订阅
        this.client.subscribe(topic, qos, (error, res) => {
          if (error) {
            console.log("subscribe to topics error", error);
            return;
          }
          this.subscribeSuccess = true;
          console.log("Subscribe to topics res", res);
        });
      });
      this.client.on("error", (error) => {
        console.log("Connection failed", error);
      });

    },
    getMessage() {
      //获取消息
      this.client.on("message", (topic, message) => {
        this.msg = message.toString()
        let data = JSON.parse(this.msg)
        // console.log(data)
        //拿到数据中的time
        let time = data.time

        // 拿到空气五合一的数据
        let Air = data.Air5
        //
        // //调用方法计算得到各个数据
        let Air_temperature = data_parse.data_parse_Air(Air, 1)
        let Air_humidity = data_parse.data_parse_Air(Air, 2)
        let Air_pressure = data_parse.data_parse_Air(Air, 3)

        let Air_illuminance = data_parse.data_parse_Air(Air, 4)
        let Air_carbon_dioxide = data_parse.data_parse_Air(Air, 5)
        let data1 = {Air_temperature, Air_humidity, Air_carbon_dioxide, Air_pressure, Air_illuminance}
        //
        // // 计算风速风向
        let Wind_data = data.Wind2;
        // //调用方法计算得到各个数据
        let Wind_speed = data_parse.data_getWind(Wind_data, 1)
        let Wind_direction = data_parse.data_getWind(Wind_data, 2)

        let data2 = {Wind_speed, Wind_direction}


        // //定义一个对象包含这些数据
        let msg = {
          time, data1, data2
        }
        this.msg = msg;
      });
    }

  },
  mounted() {
    // 获取mqtt
    this.createConnection();
    this.getMessage()
  }

}
</script>

<style lang="scss" scoped>
#center {
  padding-top: 5%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  flex-wrap: wrap;
  ////.down {
  ////padding: 6px 4px;
  ////padding-bottom: 0;
  ////width: 100%;
  ////display: flex;
  ////  align-items: center;
  ////flex-direction: column;
  ////height: 100%;
  ////justify-content: space-between;
  ////.bg-color-black {
  ////  border-radius: 5px;
  ////}
  ////.ranking {
  ////  padding: 10px;
  ////  width: 59%;
  ////  .dv-scr-rank-board {
  ////    height: 225px;
  ////  }
  ////}
  //.percent {
  //  width: 100%;
  //  display: flex;
  //  flex-direction: column;
  //  align-items: center;
  //  flex-wrap: wrap;
  //  padding: 5%;
  //  .item {
  //    width: 80%;
  //    height: 120px;
  //    display: flex;
  //    flex-direction: row;
  //    align-items: center;
  //    justify-content: center;
  //    span {
  //      margin-top: 8px;
  //      font-size: 30px;
  //      display: flex;
  //      justify-content: center;
  //    }
  //  }
  //
  //}
  //.water {
  //  margin-top: 5%;
  //  width: 100%;
  //  display: flex;
  //  flex-direction: column;
  //  align-items: center;
  //  justify-content: center;
  //  span {
  //    font-size: 30px;
  //  }
  //  .dv-wa-le-po {
  //    margin-top: 5%;
  //    height: 120px;
  //  }
  //}
}

//}
</style>
